<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6x6x6 Rubik's Cube</title>
    <style>
        body {
            display: flex;
			flex-direction: row;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            perspective: 1000px;
        }

        #controls {
            display: flex;
            flex-direction: column;
            margin-right: 20px;
        }

        #coordinate-input {
            width: 200px;
            height: 200px;
            margin-bottom: 10px;
        }

        #set-transparent-btn {
            #padding: 5px 10px;
            #margin-bottom: 10px;

        }

        #angle-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        #angle-buttons button {
            padding: 5px 10px;
        }

        #cube-container {
            width: 200px;
            height: 200px;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(30deg);
        }

        .cube {
            width: 50px;
            height: 50px;
            position: absolute;
            transform-style: preserve-3d;
        }

        .face {
            width: 50px;
            height: 50px;
            position: absolute;
            border: 1px solid #000;
            box-sizing: border-box;
        }

        .front {
            transform: translateZ(25px);
        }

        .back {
            transform: rotateY(180deg) translateZ(25px);
        }

        .right {
            transform: rotateY(90deg) translateZ(25px);
        }

        .left {
            transform: rotateY(-90deg) translateZ(25px);
        }

        .top {
            transform: rotateX(90deg) translateZ(25px);
        }

        .bottom {
            transform: rotateX(-90deg) translateZ(25px);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div id="controls">
        <textarea id="coordinate-input" placeholder='输入坐标，如 ["2,1,3","2,1,5"]'>["2,1,1","3,1,1","4,1,1","3,1,6","4,1,6","5,1,6"]
//["2,1,3","2,2,3","2,3,3","2,4,3","2,1,6","3,1,6","4,1,6","5,1,6","6,1,6"]
</textarea>
        <div id="angle-buttons">
	        <button id="set-transparent-btn">设</button>
            <button id="set005">透</button>
            <button data-angle="front">前</button>
            <button data-angle="front1">F1</button>
            <button data-angle="right">左</button>
            <button data-angle="right1">L1</button>
            <button data-angle="reset">原</button>
			<!--
            <button data-angle="back">后</button>
            <button data-angle="left">右</button>
            <button data-angle="top">上</button>
            <button data-angle="bottom">下</button>
			-->
        </div>
    </div>
    <div id="cube-container"></div>

    <script>
        $(document).ready(function () {
            const container = $('#cube-container');
            const size = 6;

            // 生成 6x6x6 魔方
            for (let x = 0; x < size; x++) {
                for (let y = 0; y < size; y++) {
                    for (let z = 0; z < size; z++) {
                        const cube = $('<div class="cube"></div>');
                        cube.css({
                            left: x * 50 + 'px',
                            top: y * 50 + 'px',
                            transform: `translateZ(${z * 50}px)`
                        });

                        const colors = {
                            front: getFaceColor(x, y, z, 'front'),
                            back: getFaceColor(x, y, z, 'back'),
                            right: getFaceColor(x, y, z, 'right'),
                            left: getFaceColor(x, y, z, 'left'),
                            top: getFaceColor(x, y, z, 'top'),
                            bottom: getFaceColor(x, y, z, 'bottom')
                        };

                        const faces = [
                            $('<div class="face front"></div>').css('background-color', colors.front),
                            $('<div class="face back"></div>').css('background-color', colors.back),
                            $('<div class="face right"></div>').css('background-color', colors.right),
                            $('<div class="face left"></div>').css('background-color', colors.left),
                            $('<div class="face top"></div>').css('background-color', colors.top),
                            $('<div class="face bottom"></div>').css('background-color', colors.bottom)
                        ];

                        cube.append(faces);
                        container.append(cube);
                    }
                }
            }

            // 设置所有小正方体面的透明度为 0.05
            container.find('.face').css('opacity', 0.05);

            // 获取每个面的颜色
            function getFaceColor(x, y, z, face) {
                if (face === 'front' && z === size - 1) return 'white';
                if (face === 'back' && z === 0) return 'yellow';
                if (face === 'right' && x === size - 1) return 'red';
                if (face === 'left' && x === 0) return 'orange';
                if (face === 'top' && y === 0) return 'blue';
                if (face === 'bottom' && y === size - 1) return 'green';
                return 'gray';
            }

            // 鼠标拖动旋转功能
            let isDragging = false;
            let startX, startY;
            let rotationX = -20;
            let rotationY = 30;

            container.on('mousedown', function (e) {
                isDragging = true;
                startX = e.clientX;
                startY = e.clientY;
            });

            $(document).on('mousemove', function (e) {
                if (isDragging) {
                    const deltaX = e.clientX - startX;
                    const deltaY = e.clientY - startY;
                    // 反转鼠标上下移动时 rotationX 的变化方向
                    rotationX -= deltaY * 0.5;
                    rotationY += deltaX * 0.5;

                    container.css('transform', `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`);

                    startX = e.clientX;
                    startY = e.clientY;

					console.log("拖动：",rotationX,rotationY,startX,startY)
                }
            });

            $(document).on('mouseup', function () {
                isDragging = false;
            });

            // 点击小格子改变透明度
            $('#cube-container').on('click', '.face', function () {
                const currentOpacity = parseFloat($(this).css('opacity'));
                if (currentOpacity === 1) {
                    $(this).css('opacity', 0.5);
                } else if (currentOpacity === 0.5) {
                    $(this).css('opacity', 0);
                } else {
                    $(this).css('opacity', 1);
                }
            });

            $('#set005').on('click', function () {
				container.find('.face').css('opacity', 0.05);
			});

            // 根据输入坐标设置透明度
            $('#set-transparent-btn').on('click', function () {
                var input = $('#coordinate-input').val();
                input = input.split("//")[0];
                try {
                    const coordinates = JSON.parse(input);
                    coordinates.forEach((coord) => {
                        const [x, y, z] = coord.split(',').map((value) => Number(value) - 1);
                        if (x >= 0 && x < size && y >= 0 && y < size && z >= 0 && z < size) {
                            //const cube = container.find(`.cube[style*="left: ${x * 50}px"][style*="top: ${y * 50}px"][style*="translateZ(${z * 50}px)"]`);
							//y座标上下调整，在这里直接改y为(6-y-1)成功
                            const cube = container.find(`.cube[style*="left: ${x * 50}px"][style*="top: ${(6-y-1) * 50}px"][style*="translateZ(${z * 50}px)"]`);
                            //cube.find('.face').css('opacity', 0.5);
                            cube.find('.face').css('opacity', 0.9);
                        }
                    });
                } catch (error) {
                    console.error('输入格式错误，请输入有效的 JSON 数组。');
                }
            });

            // 角度切换按钮功能
            $('#angle-buttons button').on('click', function () {
                const angle = $(this).data('angle');
                let targetRotationX, targetRotationY;
                let visibleFaceClass;

                switch (angle) {
                    case 'front':
                        targetRotationX = 0;
                        //targetRotationX = 7.5;
                        targetRotationY = 0;
                        //targetRotationY = -6.5;
                        visibleFaceClass = 'front';
                        break;
                    case 'front1':
                        //targetRotationX = 0;
                        targetRotationX = 7.5;
                        //targetRotationY = 0;
                        targetRotationY = -6.5;
                        visibleFaceClass = 'front';
                        break;
                    case 'back':
                        targetRotationX = 0;
                        targetRotationY = 180;
                        visibleFaceClass = 'back';
                        break;
                    case 'left':
                        targetRotationX = 0;
                        targetRotationY = -90;
                        visibleFaceClass = 'left';
                        break;
                    case 'right':
					//实际是左
                        targetRotationX = 0;
                        //targetRotationX = 6;
                        targetRotationY = 90;
                        //targetRotationY = 76.5;
                        visibleFaceClass = 'right';
                        break;

					case 'right1':
					//实际是左
                        //targetRotationX = 0;
                        targetRotationX = 6;
                        //targetRotationY = 90;
                        targetRotationY = 76.5;
                        visibleFaceClass = 'right';
                        break;
                    case 'top':
                        targetRotationX = -90;
                        targetRotationY = 0;
                        visibleFaceClass = 'top';
                        break;
                    case 'bottom':
                        targetRotationX = 90;
                        targetRotationY = 0;
                        visibleFaceClass = 'bottom';
                        break;
					case 'reset':
						targetRotationX = -20;
						targetRotationY = 30;
						break;


                }

                // 设置旋转角度
                rotationX = targetRotationX;
                rotationY = targetRotationY;
                container.css('transform', `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`);

                //// 记录所有面的原始透明度
                //const originalOpacities = {};
                //container.find('.face').each(function () {
                    //const face = $(this);
                    //originalOpacities[face[0]] = face.css('opacity');
                //});

                //// 隐藏所有非指定面
                //container.find('.face').not(`.${visibleFaceClass}`).css('opacity', 0);

                //// 恢复透明度的函数，用于在再次点击按钮或进行其他操作时恢复
                //function restoreOriginalOpacities() {
                    //Object.keys(originalOpacities).forEach((faceElement) => {
                        //$(faceElement).css('opacity', originalOpacities[faceElement]);
                    //});
                //}

                //// 点击其他按钮时恢复透明度
                //$('#angle-buttons button').off('click.restore').on('click.restore', function () {
                    //restoreOriginalOpacities();
                //});

                //// 鼠标拖动时恢复透明度
                //container.on('mousedown.restore', function () {
                    //restoreOriginalOpacities();
                    //container.off('mousedown.restore');
                //});
            });
        });
    </script>
</body>

</html>    